
import React from 'react'
import ReactDOM from 'react-dom'

import * as UnitAction  from '../../actions/UnitAction';
import { connect }  from 'react-redux';

class CenterBindUnitEdit extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {},
      unit_id: '',
      showList: false
    }

  }


  componentDidMount() {
    this.$unitList = $(ReactDOM.findDOMNode(this.refs.unitLists));
  }

  componentDidUpdate () {
    var units = this.props.units;
    var self = this;
    if (units && units.success) {
      if (units.data.length == 0 || !this.state.showList) {
        this.$unitList.hide();
      }else if (!this.state.data.unit_desc || this.state.data.unit_desc.trim() == ''){
        this.$unitList.hide();
      }
      else {
        this.$unitList.show();
      }
    }else {
      this.$unitList.hide();
    }
  }

  componentWillReceiveProps(props) {
    this.setState({
      data: props.data
    })
  }

  onUnitNumberChange(event) {
    var value = $(event.target).val();
    var data = this.state.data;
    data.unit_desc = value;
    this.setState({
      data: data,
      showList: true
    })
    this.props.dispatch(
      UnitAction.loadUnitsAsync({unit_desc: value})
    )
  }

  onUnitNumberClick(data) {
    var value = data.unit_desc;
    var currentData = this.state.data;
    currentData.unit_desc = value;
    currentData.unit_number = data.unit_number;
    currentData.unit_id = data.id;
    console.log(currentData)
    this.setState({
      data: currentData,
      showList: false
    })
  }

  onDataSubmit() {
    var data = this.state.data;

    this.props.onDataCreate(data)

  }

  onChange(event, key) {
    var value = $(event.target).val();
    var data = this.state.data;
    data[key] = value;
    this.setState({
      data: data
    })
  }

  renderUnitList() {
    var units = this.props.units
    var self = this;
    if (units && units.success) {
      if (units.data.length == 0 || !this.state.showList) {
        return ""
      }else if (!this.state.data.unit_desc || this.state.data.unit_desc.trim() == ''){
        return ""
      }
      else {
        return units.data.map(function(data) {
          return (
            <li className="list-group-item"
                onClick={(event)=>self.onUnitNumberClick(data)}>{data.unit_desc}</li>
          )
        })
      }
    }else {
      return "";
    }
  }

  render() {
    var self = this;
    return (
      <div className="modal fade" id="unitSettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog modal-lg" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="unit-modal-label">户号</h4>
            </div>
            <div className="modal-body">
              <div className="form-group">
                <label for="unit-name">户号</label>
                <input ref="unitName" type="text" className="form-control"
                        id="unit-name" placeholder="户号" value={self.state.data.unit_desc}
                        onChange={(event)=>this.onUnitNumberChange(event)}/>
                <div className="unit-lists" ref="unitLists" id="centerUnitList">
                  <ul className="list-group">
                    {this.renderUnitList()}
                  </ul>
                </div>
              </div>

            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onDataSubmit()}>提交</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    units: state.units
  }
}

export default connect(mapStateToProps)(CenterBindUnitEdit)
